<script lang="ts" setup>
import { useRoute } from "vue-router"
import router from "@/router"
import { SlashIcon } from "tdesign-icons-vue-next"

const route = useRoute()
</script>

<template>
  <t-breadcrumb class="container">
    <t-breadcrumbItem v-for="item in route.matched" :key="item.path" @click="router.push(item.path)">
      <span>{{ item.meta["title"] }}</span>
    </t-breadcrumbItem>
    <template #separator><SlashIcon /></template>
  </t-breadcrumb>
</template>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  padding-bottom: 1px;
  margin-left: 10px;
  span {
    margin: 0 4px;
    font-weight: bold;
  }
}
</style>
